<template>
  <view class="order-detail">
    <!-- 订单状态 -->
    <view class="status-card">
      <view class="status-header">
        <view class="status-icon">
          <wd-icon :name="statusIcon" size="80rpx" :color="statusColor" />
        </view>
        <view class="status-content">
          <view class="status-text">{{ orderStatusText }}</view>
          <view class="status-desc">
            <template v-if="order.status === 0">
              <text>请在</text>
              <text class="countdown">{{ countdownTime }}</text>
              <text>内完成支付</text>
            </template>
            <template v-else>{{ orderStatusDesc }}</template>
          </view>
        </view>
      </view>

      <!-- 物流信息相关内容已移除 -->

      <view class="delivery-info" v-if="order.pickup === 0">
        <wd-icon name="location" size="32rpx" />
        <view class="address-content">
          <view class="user-info">
            <text class="name">{{ order.username }}</text>
            <text class="phone">{{ order.phone }}</text>
          </view>
          <view class="address">{{ order.address }}</view>
        </view>
      </view>
      <view class="store-info" v-else>
        <wd-icon name="shop" size="32rpx" />
        <view class="store-content">
          <view class="store-name">{{ order.username + order.phone }}</view>
          <view class="store-address">{{ order.address }}</view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-card">
      <view class="goods-item" v-for="item in order.orderItemList" :key="item.id"
        @click="goToProductDetail(item.productId)">
        <image :src="item.image" mode="aspectFill" class="goods-image" />
        <view class="goods-info">
          <view class="goods-name">{{ item.productName }}</view>
          <view class="goods-params" v-if="item.params">{{ item.params }}</view>
          <view class="price-quantity">
            <view class="price">¥{{ formatPrice(item.realPrice) }}</view>
            <view class="quantity">x{{ item.quantity }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info-card">
      <view class="info-title">订单信息</view>
      <view class="info-item">
        <text>订单编号</text>
        <view class="value-copy">
          <text>{{ order.orderNo }}</text>
          <wd-button size="small" type="info" @click="copyOrderNo">复制</wd-button>
        </view>
      </view>
      <view class="info-item">
        <text>下单时间</text>
        <text>{{ formatDate(order.createTime) }}</text>
      </view>
      <view class="info-item">
        <text>支付方式</text>
        <text>微信支付</text>
      </view>
      <view class="info-item">
        <text>配送方式</text>
        <text>{{ order.pickup === 0 ? '快递配送' : '门店自提' }}</text>
      </view>
      <view class="info-item" v-if="order.remark">
        <text>备注</text>
        <text>{{ order.remark }}</text>
      </view>
    </view>

    <!-- 订单金额 -->
    <view class="price-card">
      <view class="price-item">
        <text>商品总价</text>
        <text>¥{{ formatPrice(order.totalAmount) }}</text>
      </view>
      <view class="price-item" v-if="order.couponAmount > 0 && order.couponId">
        <text>优惠券</text>
        <text class="discount">-¥{{ formatPrice(order.couponAmount) }}</text>
      </view>
      <view class="price-item" v-if="order.pickup === 0">
        <text>运费</text>
        <text>¥{{ formatPrice(order.freight) }}</text>
      </view>
      <view class="price-item total">
        <text>实付金额</text>
        <text class="total-price">¥{{ formatPrice(order.realAmount) }}</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <!-- 未支付 -->
      <block v-if="order.status === 0">
        <wd-button type="info" size="large" @click="handleCancelOrder">取消订单</wd-button>
        <wd-button type="primary" size="large" @click="payOrder">立即支付</wd-button>
      </block>

      <!-- 已支付 -->
      <block v-if="order.status === 1">
        <wd-button type="info" size="large" open-type="contact" @click="contactService">联系客服</wd-button>
        <wd-button type="info" size="large" @click="handleApplyRefund">申请退款</wd-button>
      </block>

      <!-- 待发货 -->
      <block v-if="order.status === 2">
        <wd-button type="info" size="large" open-type="contact" @click="contactService">联系客服</wd-button>
        <wd-button type="info" size="large" @click="handleApplyRefund">申请退款</wd-button>
      </block>

      <!-- 已发货 -->
      <block v-if="order.status === 3">
        <wd-button type="info" size="large" open-type="contact" @click="contactService">联系客服</wd-button>
        <wd-button type="primary" size="large" @click="handleConfirmReceive">确认收货</wd-button>
      </block>

      <!-- 待自提 -->
      <block v-if="order.status === 4">
        <wd-button type="info" size="large" open-type="contact" @click="contactService">联系客服</wd-button>
        <wd-button type="info" size="large" @click="handleApplyRefund">申请退款</wd-button>
        <wd-button type="primary" size="large" @click="confirmPickup">确认自提</wd-button>
      </block>

      <!-- 已完成 -->
      <block v-if="order.status === 5">
        <wd-button type="primary" size="large" @click="goToComment" v-if="!order.commented">评价订单</wd-button>
      </block>

      <!-- 待退款 -->
      <block v-if="order.status === 6">
        <wd-button type="info" size="large" open-type="contact" @click="contactService">联系客服</wd-button>
        <wd-button type="info" size="large" @click="checkRefund">退款详情</wd-button>
      </block>

      <!-- 已退款 -->
      <block v-if="order.status === 9">
        <wd-button type="info" size="large" @click="checkRefund">退款详情</wd-button>
      </block>

      <!-- 已取消 -->
      <block v-if="order.status === 7">
      </block>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { getOrderDetail, cancelOrder, completeOrder, applyRefund } from '@/api/order'
import { wxRepay } from '@/api/payment'

// 订单数据
const order = ref({})
// 倒计时相关
const countdown = ref(null)
const countdownTime = ref('')

// 订单状态图标
const statusIcon = computed(() => {
  const iconMap = {
    0: 'clock',          // 未支付
    1: 'check',          // 已支付
    2: 'cart',           // 待发货
    3: 'logistics',      // 已发货
    4: 'shop',           // 待自提
    5: 'success',        // 已完成
    6: 'warning',        // 待退款
    7: 'close'           // 已取消
  }
  return iconMap[order.value.status] || 'info'
})

// 订单状态颜色
const statusColor = computed(() => {
  const colorMap = {
    0: '#ff6010',        // 未支付 - 橙色
    1: '#2b85e4',        // 已支付 - 蓝色
    2: '#2b85e4',        // 待发货 - 蓝色
    3: '#2b85e4',        // 已发货 - 蓝色
    4: '#2b85e4',        // 待自提 - 蓝色
    5: '#19be6b',        // 已完成 - 绿色
    6: '#ff9900',        // 待退款 - 黄色
    7: '#999999'         // 已取消 - 灰色
  }
  return colorMap[order.value.status] || '#333'
})

// 计算剩余支付时间
const calculateRemainingTime = () => {
  if (order.value.status !== 0 || !order.value.createTime) return

  const createTime = new Date(order.value.createTime).getTime()
  const now = new Date().getTime()
  const timeLimit = 30 * 60 * 1000 // 30分钟支付时限
  const remainingTime = createTime + timeLimit - now

  if (remainingTime <= 0) {
    clearInterval(countdown.value)
    countdownTime.value = '支付超时'
    // TODO: 调用取消订单接口
    return
  }

  const minutes = Math.floor(remainingTime / (1000 * 60))
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000)
  countdownTime.value = `${minutes}分${seconds}秒`
}

// 开始倒计时
const startCountdown = () => {
  if (order.value.status === 0) {
    calculateRemainingTime()
    countdown.value = setInterval(calculateRemainingTime, 1000)
  }
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (countdown.value) {
    clearInterval(countdown.value)
  }
})

// 获取订单信息
const getOrderInfo = async (orderId) => {
  try {
    uni.showLoading({ title: '加载中' })

    // 调用订单详情接口
    const result = await getOrderDetail(orderId)

    // 接口返回成功，使用真实数据
    if (result) {
      // 将接口返回的数据转换为组件所需格式
      const orderData = {
        id: result.id,
        orderNo: result.orderNo,
        status: result.status,
        createTime: result.createTime,
        pickup: result.pickup,
        username: result.contactName,
        phone: result.contactPhone,
        address: result.contactAddress,
        totalAmount: result.totalAmount,
        couponId: result.couponId,
        couponName: result.couponName,
        couponAmount: result.couponAmount || 0,
        freight: 0.00, // 运费暂时写死
        realAmount: result.realAmount,
        remark: result.remark,
        orderItemList: result.items.map(item => ({
          id: item.id,
          productId: item.productId,
          productName: item.productName,
          image: item.productImage,
          params: '', // 参数信息API中暂无
          realPrice: item.realPrice,
          quantity: item.quantity
        })),
        commented: result.canComment === 0
      }

      order.value = orderData
    } else {
      // 接口请求失败，使用模拟数据，暂时保留
      const mockData = {
        orderNo: order.value.orderNo || 'ORDER2024031500001',
        status: 0,
        createTime: Date.now(),
        pickup: 0,
        username: '张三',
        phone: '138****8888',
        address: '广东省深圳市南山区科技园南区科技南十二路2号金蝶软件园B栋',
        pickupPointName: '金蝶软件园店',
        pickupPointAddress: '广东省深圳市南山区科技园南区科技南十二路2号',
        totalAmount: 299.00,
        couponAmount: 30.00,
        freight: 10.00,
        realAmount: 279.00,
        remark: '请尽快发货',
        orderItemList: [
          {
            id: 1,
            productName: 'Apple iPhone 15 Pro Max',
            image: 'https://img14.360buyimg.com/n0/jfs/t1/236328/4/10793/40832/657c545fF33359ae5/a5a89ebd8b290912.jpg',
            params: '暗紫色 256GB',
            realPrice: 9999.00,
            quantity: 1
          },
          {
            id: 2,
            productName: 'Apple AirPods Pro',
            image: 'https://img14.360buyimg.com/n0/jfs/t1/142037/35/35999/23003/6449d123F437b5969/85c80788d31a6c85.jpg',
            params: '第二代',
            realPrice: 1799.00,
            quantity: 2
          }
        ],
        commented: false,
      }

      order.value = mockData
    }

    startCountdown()
    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '加载失败',
      icon: 'none'
    })
  }
}

// 页面加载
onLoad(async (options) => {
  if (options.orderId) {
    await getOrderInfo(options.orderId)
  }
})

// 启用下拉刷新
onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  page.enablePullDownRefresh()
})

// 下拉刷新回调
onPullDownRefresh(async () => {
  try {
    if (order.value.id) {
      await getOrderInfo(order.value.id)
    }
  } finally {
    uni.stopPullDownRefresh()
  }
})

// 订单状态文字
const orderStatusText = computed(() => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '待发货',
    3: '已发货',
    4: '待自提',
    5: '已完成',
    6: '待退款',
    7: '已取消'
  }
  return statusMap[order.value.status] || ''
})

// 订单状态描述
const orderStatusDesc = computed(() => {
  const descMap = {
    0: '请在30分钟内完成支付',
    1: '商家正在处理您的订单',
    2: '商家正在准备发货',
    3: '商品正在配送中',
    4: '商品已到达自提点',
    5: '订单已完成',
    6: '退款申请处理中',
    7: '订单已取消'
  }
  return descMap[order.value.status] || ''
})

// 格式化价格
const formatPrice = (price) => {
  return Number(price).toFixed(2)
}

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  const second = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

// 复制订单号
const copyOrderNo = () => {
  uni.setClipboardData({
    data: order.value.orderNo,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}

// 取消订单
const handleCancelOrder = async () => {
  try {
    // 修改 showModal 的使用方式
    const res = await new Promise((resolve, reject) => {
      uni.showModal({
        title: '提示',
        content: '确定要删除选中的商品吗？',
        confirmColor: '#FF2C54',
        success: (result) => {
          resolve(result)
        },
        fail: (error) => {
          reject(error)
        }
      })
    })
    if (res.confirm) {
      uni.showLoading({ title: '处理中' })
      await cancelOrder(order.value.id)
      uni.hideLoading()
      uni.showToast({
        title: '订单已取消',
        icon: 'success'
      })

      // 刷新订单详情
      getOrderInfo(order.value.id)
    }

  } catch (error) {
    uni.hideLoading()
    console.log('error', error.message);
    uni.showToast({
      title: error.message || '操作失败',
      icon: 'none'
    })
  }
}

// 支付订单
const payOrder = async () => {

  console.log('order.value.id', order.value.id);
  const result = await wxRepay(order.value.id);
  // 发起微信支付
  try {
    await new Promise((resolve, reject) => {
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: result.timeStamp,
        nonceStr: result.nonceStr,
        package: result.prepayPackage,
        signType: result.signType,
        paySign: result.paySign,
        success: (res) => {
          resolve(res)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
    // 支付成功
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    })

    // 跳转到支付成功页面
    setTimeout(() => {
      uni.redirectTo({
        url: `/pages/order/success?orderId=${result.orderId}&orderNo=${result.orderNo}&amount=${order.value.realAmount}`
      })
    }, 1500)
  } catch (payError) {
    // 支付失败或取消
    console.error('支付失败:', payError)

    // 跳转到订单详情页
    uni.redirectTo({
      url: `/pages/order/detail?orderId=${result.orderId}`
    })
  }

}

// 跳转到商品详情
const goToProductDetail = (productId) => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${productId}`
  })
}

// 跳转到售后
const goToAfterSale = (item) => {
  uni.navigateTo({
    url: `/pages/after-sale/apply?orderId=${order.value.orderNo}&itemId=${item.id}`
  })
}

// 确认收货
const handleConfirmReceive = async () => {
  try {
    // 修改 showModal 的使用方式
    const res = await new Promise((resolve, reject) => {
      uni.showModal({
        title: '提示',
        content: '确定收货吗？',
        confirmColor: '#FF2C54',
        success: (result) => {
          resolve(result)
        },
        fail: (error) => {
          reject(error)
        }
      })
    })
    if (res.confirm) {
      uni.showLoading({ title: '处理中' })
      await completeOrder(order.value.id)
      uni.hideLoading()
      uni.showToast({
        title: '确认收货成功',
        icon: 'success'
      })
      // 刷新订单详情
      getOrderInfo(order.value.id)
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '操作失败',
      icon: 'none'
    })
  }
}

// 联系客服
const contactService = () => {
  // 实现客服联系逻辑
  uni.showToast({
    title: '正在接入客服...',
    icon: 'none'
  })
}

// 再次购买
const buyAgain = () => {
  // 实现再次购买逻辑
  const productIds = order.value.orderItemList.map(item => item.id)
  uni.navigateTo({
    url: `/pages/cart/index?productIds=${productIds.join(',')}`
  })
}

// 去评价
const goToComment = () => {
  uni.navigateTo({
    url: `/pages/order/comment?orderId=${order.value.id}`
  })
}

// 申请退款
const handleApplyRefund = async () => {
  try {
    // 弹出输入框让用户输入退款原因
    const res = await new Promise((resolve, reject) => {
      uni.showModal({
        title: '申请退款',
        content: '请输入退款原因',
        editable: true,
        placeholderText: '请输入退款原因',
        confirmColor: '#FF2C54',
        success: (result) => {
          resolve(result)
        },
        fail: (error) => {
          reject(error)
        }
      })
    })
    
    if (res.confirm && res.content) {
      uni.showLoading({ title: '处理中' })
      await applyRefund(order.value.id, {
        reason: res.content
      })
      uni.hideLoading()
      uni.showToast({
        title: '申请退款成功',
        icon: 'success'
      })
      // 刷新订单详情
      getOrderInfo(order.value.id)
    } else if (res.confirm && !res.content) {
      uni.showToast({
        title: '请输入退款原因',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '操作失败',
      icon: 'none'
    })
  }
}

// 确认自提
const confirmPickup = async () => {
  try {
    // 修改 showModal 的使用方式
    const res = await new Promise((resolve, reject) => {
      uni.showModal({
        title: '提示',
        content: '确定已经自提吗？',
        confirmColor: '#FF2C54',
        success: (result) => {
          resolve(result)
        },
        fail: (error) => {
          reject(error)
        }
      })
    })
    if (res.confirm) {
      uni.showLoading({ title: '处理中' })
      await completeOrder(order.value.id)
      uni.hideLoading()
      uni.showToast({
        title: '确认自提成功',
        icon: 'success'
      })
      // 刷新订单详情
      getOrderInfo(order.value.id)
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '操作失败',
      icon: 'none'
    })
  }
}

// 查看退款详情
const checkRefund = () => {
  uni.navigateTo({
    url: `/pages/order/refund-detail?id=${order.value.id}`
  })
}
</script>

<style lang="scss">
.order-detail {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 140rpx;

  .status-card {
    background: linear-gradient(to bottom, #ffffff, #f8f8f8);
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .status-header {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;

      .status-icon {
        margin-right: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 100rpx;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

        :deep(.status-icon-inner) {
          font-size: 80rpx;
        }
      }

      .status-content {
        flex: 1;

        .status-text {
          font-size: 40rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 12rpx;
        }

        .status-desc {
          font-size: 28rpx;
          color: #666;

          .countdown {
            color: #ff6010;
            font-weight: bold;
            margin: 0 6rpx;
            font-size: 32rpx;
          }
        }
      }
    }

    .delivery-info,
    .store-info {
      display: flex;
      align-items: flex-start;
      background: rgba(255, 255, 255, 0.8);
      padding: 24rpx;
      border-radius: 16rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .wd-icon {
        margin-right: 20rpx;
        margin-top: 4rpx;
        color: #2b85e4;
      }

      .address-content,
      .store-content {
        flex: 1;

        .user-info {
          margin-bottom: 12rpx;

          .name {
            font-size: 30rpx;
            color: #333;
            font-weight: 500;
            margin-right: 24rpx;
          }

          .phone {
            font-size: 28rpx;
            color: #666;
          }
        }

        .address,
        .store-address {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }

        .store-name {
          font-size: 30rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 12rpx;
        }
      }
    }
  }

  .goods-card {
    background: #fff;
    margin: 24rpx 20rpx;
    padding: 24rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .goods-item {
      display: flex;
      padding: 24rpx 0;
      position: relative;

      &:not(:last-child) {
        border-bottom: 1rpx solid #eee;
      }

      .goods-image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 12rpx;
        background: #f5f5f5;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
      }

      .goods-info {
        flex: 1;
        margin-left: 24rpx;
        position: relative;

        .goods-name {
          font-size: 30rpx;
          color: #333;
          line-height: 1.4;
          margin-bottom: 12rpx;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .goods-params {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 12rpx;
          background: #f8f8f8;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;
          display: inline-block;
        }

        .price-quantity {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price {
            font-size: 34rpx;
            color: #ff2c54;
            font-weight: bold;
          }

          .quantity {
            font-size: 28rpx;
            color: #666;
            background: #f8f8f8;
            padding: 4rpx 12rpx;
            border-radius: 6rpx;
            text-align: right;
            min-width: 40rpx;
          }
        }
      }
    }
  }

  .order-info-card {
    background: #fff;
    margin: 24rpx 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .info-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 24rpx;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background: #2b85e4;
        border-radius: 3rpx;
      }
    }

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      font-size: 28rpx;
      color: #666;

      .value-copy {
        display: flex;
        align-items: center;
        gap: 20rpx;
        color: #333;

        .wd-button {
          margin-left: 20rpx;
          height: 52rpx;
          padding: 0 24rpx;
          border-radius: 26rpx;
        }
      }
    }
  }

  .price-card {
    background: #fff;
    margin: 24rpx 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .price-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      font-size: 28rpx;
      color: #666;

      &.total {
        margin-top: 24rpx;
        padding-top: 24rpx;
        border-top: 1rpx solid #eee;

        .total-price {
          font-size: 40rpx;
          color: #ff2c54;
          font-weight: bold;
        }
      }

      .discount {
        color: #ff2c54;
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);

    .wd-button {
      min-width: 160rpx;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: 500;

      &--primary {
        background: linear-gradient(135deg, #ff6010, #ff2c54);
        border: none;
      }

      &--info {
        border-color: #ddd;
      }
    }
  }
}
</style>